<!DOCTYPE html>
<html>
<head>
    <title>个人页面</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/userProfiles.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/checkLogin.js"></script>
    <script>
        $(function () {
            //获取当前登录用户的id
            var currentUserId = user.id;
            // 获取当前查看用户id
            var userId = getParams().id;
            //查看关注状态
            $.get(baseUrl + '/users/checkFollow', {
                followId: userId,
                fansId: currentUserId
            }, function (data) {
                if (data.success) {
                    //已关注
                    $('#followBtn').html('已关注')
                    //设置关注状态
                    $('#followBtn').attr('data-type', 1)
                } else {
                    //未关注
                    $('#followBtn').html('关注')
                    //设置未关注状态
                    $('#followBtn').attr('data-type',0)
                }
            })

            //点击关注,取消关注
            $('#followBtn').click(function () {
                //查看当前关注状态
                var type=$(this).data('type')
                if (type){

                    //发送取消关注请求
                    $.ajax({
                        url: baseUrl + "/users/disFollow" + '?followId=' + userId + '&fansId=' + currentUserId,
                        method: "delete",
                        success: function (data) {
                            //window.location.reload();
                            //已关注--->未关注
                            $('#followBtn').html('关注')
                            $('#followBtn').data('type',0);
                        }
                    })
                }else{
                    //发送关注请求
                    $.ajax({
                        url: baseUrl + "/users/follow" + '?followId=' + userId + '&fansId=' + currentUserId,
                        method: "put",
                        success: function () {
                            //window.location.reload();
                            //未关注---->已关注
                            $('#followBtn').html('已关注')
                            $('#followBtn').data('type',1);
                        }
                    })
                }
            })
            // 获取当前查看用户个人信息
            $.ajax({
                url: baseUrl + "/users/" + userId,
                method: "get",
                success: function (data) {
                    var user = data.data;
                    $(".info").renderValues(user, {
                        getHref: getHref
                    });
                    $(".bg").css("background-image", "url(" + user.coverImgUrl + ")");
                }
            });
            //定义我的栏目状态,默认我的游记
            var type = 1;
            $('#comments-tab').click(function () {
                //我的点评
                type = 2;
            })
            $('#pills-contact-tab').click(function () {
                //我的旅行单
                type = 3;
            })
            //当前页
            var currentPage = 1;
            //总页数
            var pages;
            //存储游记的数组
            var travelArr = [];

            //点击标题栏目清空分页条件
            $('.nav-link').click(function () {
                console.log("重置分页")
                currentPage = 1;

                pages = 0;

                travelArr = [];
                if (type == 2) {
                    //默认查询第一页
                    query2();
                }else if (type==3){
                    query3();
                }
            })

            function query() {
                //获取我的游记
                $.get(baseUrl + "/users/" + userId + "/travels", {currentPage: currentPage}, function (data) {
                    //把第二个数组合并第一个数组中
                    $.merge(travelArr, data.list);
                    var json = {
                        list: travelArr
                    };
                    //渲染数据
                    $("#travels").renderValues(json, {
                        getHref: getHref
                    });
                    //获取总页数
                    pages = data.pages;
                })
                currentPage = currentPage + 1;
            }

            //默认查询第一页
            query();


            //查询我的点评
            function query2() {
                //获取我的点评
                $.get(baseUrl + "/users/" + userId + "/strategyComments", {currentPage: currentPage}, function (data) {
                    //把第二个数组合并第一个数组中
                    $.merge(travelArr, data.list);
                    var json = {
                        list: travelArr
                    };
                    //渲染数据
                    $("#comments").renderValues(json, {
                        getHref: getHref,
                        getStar: function (item, value) {
                            var temp = '';
                            for (var i = 0; i < value; i++) {
                                temp += '<i class="fa fa-star"></i>';
                            }
                            for (var i = 0; i < 5 - value; i++) {
                                temp += '<i class="fa fa-star-o"></i>';
                            }
                            $(item).html(temp);
                        }
                    });
                    //获取总页数
                    pages = data.pages;
                })
                currentPage = currentPage + 1;
            }
            //查询我的旅行单
            function query3() {
                //获取我的旅行单
                $.get(baseUrl + "/strategies/travelList", {currentPage: currentPage,travelListUserId:userId}, function (data) {
                    //把第二个数组合并第一个数组中
                    $.merge(travelArr, data.list);
                    var json = {
                        list: travelArr
                    };
                    //渲染数据
                    $("#travelList").renderValues(json, {
                        getHref: getHref
                    });
                    //获取总页数
                    pages = data.pages;
                })
                currentPage = currentPage + 1;
            }


            //给window绑定滚动事件
            $(window).scroll(function () {
                if ($(window).height() + $(document).scrollTop() + 1 >= $(document).height()) {
                    //如果是小于总页数就发送请求
                    if (currentPage <= pages) {
                        if (type == 1) {

                            query();
                        } else if (type==2) {
                            query2()
                        }else if (type==3){
                            query3()
                        }
                    } else {
                        $(document).dialog({
                            type: 'notice',
                            content: '<span class="info-text">亲,已经到底了!</span>',
                            autoClose: 2500
                        });
                    }
                }
            });

            // 点击私信事件
            $("#letterBtn").click(function () {
                window.location.href = "/mine/chats.html?receiverId=" + getParams().id;
            });
        });
    </script>
</head>
<body>
<div class="container bg">
    <a href="javascript:window.history.go(-1)" class="my-arrow">
        <span><i class="fa fa-chevron-left fa-2x"></i></span>
    </a>
    <div class="container">
        <div class="info">
            <img class="rounded-circle" width="17%" render-src="headImgUrl">
            <p class="name" render-html="nickName"></p>
            <p render-html="sign"></p>

            <div class="row num">
                <div class="col-2 border border-left-0 border-top-0 border-bottom-0">
                    <div>
                        <span render-html="followCount">1</span>
                    </div>
                    <div>
                        <a render-key="id" render-fun="getHref" data-url="/focusList.html?id=">关注</a>
                    </div>
                </div>
                <div class="col-2">
                    <div>
                        <span render-html="fansCount">0</span>
                    </div>
                    <div>
                        <a render-key="id" render-fun="getHref" data-url="/fansList.html?id=">粉丝</a>
                    </div>
                </div>
                <div class="col">
                    <button class="btn btn-outline-light ibtn" id="letterBtn">私信</button>
                    <button class="btn btn-success ibtn" id="followBtn" data-type="">关注</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="tabs">
    <ul class="nav nav-pills nav-justified  border border-left-0 border-top-0 border-right-0" id="pills-tab"
        role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="travels-tab" data-toggle="pill" href="#travels">
                TA的游记
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link " id="comments-tab" data-toggle="pill" href="#comments">
                TA的点评
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact">
                TA的旅行单
            </a>
        </li>
    </ul>
    <div class="container tab-content" id="pills-tabContent">
        <div class="tab-pane fade show active" id="travels">
            <div render-loop="list">
                <dl class="list">
                    <dd>
                        <a render-key="list.id" render-fun="getHref" data-url="/travelContent.html?id=">
                            <img render-src="list.coverUrl">
                            <p><span class="title" render-html="list.title"></span>
                                <span class="span-right">
						 				<span>0</span> <i class="fa fa-thumbs-o-up"></i></span>
                            </p>
                        </a>
                        <hr>
                    </dd>
                </dl>
            </div>
        </div>

        <div class="comment tab-pane fade " id="comments">
            <div render-loop="list">
                <div>
                    <div class="row">
                        <div class="col-2 comment-head">
                            <img class="rounded-circle" render-src="list.user.headImgUrl">
                        </div>
                        <div class="col">
                            <span class="comment-star" render-key="list.starNum" render-fun="getStar"></span>

                            <span class="comment-date" render-html="list.createTime">2018-07-11</span>
                            <div class="comment-content" render-html="list.content">
                                <p>骑了个单车到沙面，春风把从上下九和宝华路带来的燥热吹散。沙面临江，下午的时光让这富有异国风情的公园显得更加宁静惬意，哪怕...</p>
                            </div>
                            <ul class="comment-img" render-loop="list.imgUrlsArr">
                                <li>
                                    <img render-src="list.imgUrlsArr.self">
                                </li>
                            </ul>
                            <div class="comment-link">
                                <a render-key="list.strategy.id" render-fun="getHref"
                                   data-url="/strategyCatalogs.html?id=">
                                    <img render-src="list.strategy.coverUrl"> <span
                                        render-html="list.strategy.title"></span>
                                    <i class="fa fa-angle-right fa-2x"></i>
                                </a>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="pills-contact">
            <div class="tab-pane fade show active" id="travelList">
                <div render-loop="list">
                    <dl class="list">
                        <dd>
                            <a render-key="list.id" render-fun="getHref" data-url="/strategyCatalogs.html?id=">
                                <img render-src="list.coverUrl">
                                <p><span class="title" render-html="list.title"></span></p>
                            </a>
                            <hr>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>